<template>
    <section>
        <div class="panel">
            <div class="panel-head">
                <strong><i class="el-icon-date"/><span class="title">红包活动配置</span></strong>
            </div>
            <div class="body-content">
                <el-form ref="form" :model="form" label-width="300px">
                    <el-form-item label="每日红包上限">
                        <el-input 
                            placeholder="请输入每日红包上限"
                            v-model.trim="form.maxPrizeCountDaily"/>
                    </el-form-item>
                    <el-form-item label="邀请人每日获得红包数量上限">
                        <el-input 
                            placeholder="请输入邀请人每日获得红包数量上限"
                            v-model.trim="form.inviterMaxPrizeCountDaily"/>
                    </el-form-item>
                    <el-form-item label="被邀请人注册奖励奖励金额（元/单位）">
                        <el-input
                            placeholder="请输入被邀请人注册奖励奖励金额"
                            v-model.trim="form.inviteeRegPrizeAmount"/>
                    </el-form-item>
                    <el-form-item label="被邀请人实名奖励奖励金额（元/单位）">
                        <el-input
                            placeholder="请输入被邀请人实名奖励奖励金额"
                            v-model.trim="form.inviteeRealNamePrizeAmount"/>
                    </el-form-item>
                    <el-form-item label="被邀请人绑卡奖励金额（元/单位）">
                        <el-input 
                            placeholder="请输入被邀请人绑卡奖励金额"
                            v-model.trim="form.inviteeBindCardPrizeAmount"/>
                    </el-form-item>
                    <el-form-item label="邀请人小额奖励金额上限（元/单位）">
                        <el-input 
                            placeholder="请输入邀请人小额奖励金额上限"
                            v-model.trim="form.inviterPrizeLowQuota"/>
                    </el-form-item>
                    <el-form-item label="邀请人大额奖励金额上限（元/单位）">
                        <el-input 
                            placeholder="请输入邀请人大额奖励金额上限"
                            v-model.trim="form.inviterPrizeHighQuota"/>
                    </el-form-item>
                    <el-form-item
                        label="活动起止时间">
                        <el-date-picker
                            value-format="yyyy-MM-dd HH:mm:ss"
                            format="yyyy-MM-dd HH:mm:ss"
                            v-model="dateRange"
                            type="datetimerange"
                            range-separator="至"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期"/>
                    </el-form-item>
                    <el-form-item label="是否启用">
                        <el-select v-model="form.online" style="width:150px;" placeholder="请选择活动状态" size="small">
                            <el-option label="启用" value=1 />
                            <el-option label="禁用" value=0 />
                        </el-select>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="submitForm('numberValidateForm')">{{form.activityId ? "更新":"提交"}}</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </div>
    </section>
</template>

<script>
import { getRegActivityConfig, saveRegActivityConfig } from "../../api/api";
export default {
    data() {
        return {
            form: {
                activityId: null,
                startTime: null,
                endTime: null,
                // 每日红包上限
                maxPrizeCountDaily: null,
                // 邀请人每日获得红包数量上限
                inviterMaxPrizeCountDaily: null,
                // 被邀请人注册奖励奖励金额（分）
                inviteeRegPrizeAmount: null,
                // 被邀请人实名奖励金额（分）
                inviteeRealNamePrizeAmount: null,
                // 被邀请人绑卡奖励金额（分）
                inviteeBindCardPrizeAmount: null,
                // 邀请人小额奖励金额最大金额（分）
                inviterPrizeLowQuota: null,
                // 邀请人大额奖励金额最大金额（分）
                inviterPrizeHighQuota: null,
                online: 0
            },
            dateRange: []
        };
    },
    methods: {
        submitForm() {
            const checkKeks = [
                {
                    key: "maxPrizeCountDaily",
                    msg: "每日红包上限"
                },
                {
                    key: "inviterMaxPrizeCountDaily",
                    msg: "邀请人每日获得红包数量上限"
                },
                {
                    key: "inviteeRegPrizeAmount",
                    msg: "被邀请人注册奖励奖励金额"
                },
                {
                    key: "inviteeRealNamePrizeAmount",
                    msg: "被邀请人实名奖励实名奖励金额"
                },
                {
                    key: "inviteeBindCardPrizeAmount",
                    msg: "被邀请人绑卡奖励金额"
                },
                {
                    key: "inviterPrizeLowQuota",
                    msg: "邀请人小额奖励金额上限"
                },
                {
                    key: "inviterPrizeHighQuota",
                    msg: "邀请人大额奖励金额上限"
                }
            ];
            console.log(this.dateRange);
            console.log(this.form);

            for (const key in checkKeks) {
                const item = checkKeks[key];
                if (
                    this.form[item.key] === undefined ||
                    this.form[item.key] === ""
                ) {
                    this.$message.error(`请输入${item.msg}`);
                    return;
                } else if (this.form[item.key] <= 0) {
                    this.$message.error(`${item.msg}不能小于等于0`);
                    return;
                } else if (isNaN(this.form[item.key])) {
                    this.$message.error(`${item.msg}要求输入正确数值`);
                    return;
                }
            }

            if (
                this.form.inviterPrizeHighQuota < this.form.inviterPrizeLowQuota
            ) {
                this.$message.error(
                    "【邀请人大额奖励金额最大金额】不能小于【邀请人小额奖励金额最大金额】"
                );
                return;
            }

            // 日期校验
            if (!this.dateRange || this.dateRange.length === 0) {
                this.$message.error("请选择活动起止时间");
                return;
            }
            this.form.startTime = this.dateRange[0];
            this.form.endTime = this.dateRange[1];
            saveRegActivityConfig(this.form).then(res => {
                this.$message.success(res.message || "保存成功！");
                this.getRegActivityConfig();
            });
        },
        getRegActivityConfig() {
            // 获取佣金比例配置列表
            return getRegActivityConfig().then(res => {
                this.form = res.data;
                this.form.online = this.form.online.toString();
                this.dateRange = [this.form.startTime, this.form.endTime];
            });
        }
    },
    mounted() {
        this.getRegActivityConfig();
    }
};
</script>

<style scoped>
.body-content {
    width: 600px;
}
</style>
